<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/pull.css">
  <link rel="stylesheet" href="icon/icon.css">
  <link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">
</head>


<body>
  <!-- //导航 -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- 小图标 -->
      <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="logo.html" class="navbar-brand">我的博客</a>
      </div>


      <!-- logo -->
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home">首页</a></li>
          <li><a href="#bbs">论坛</a></li>
          <li><a href="#html5">前端开发</a></li>
          <li><a href="logo.html">uni-app跨平台</a></a></li>
          <li><a href="#footer">联系我们</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- header -->
  <section id="home">
    <div class="head-con">
      <div class="container">
        <div class="row wow fadeInUpBig" data-wow-duration="1s" data-wow-delay="1.2s">
          <div class="col-md-1"></div>
          <div class="col-md-10">
            <h1>bootstrap实战练习 基于 Bootstrap 构建的网站</h1>
            <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
            </p>
            <p>Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>
            <div class="row">
              <div class="col-sm-4">
                <img class="img-responsive"
                  src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/img/sass-less.png" alt="">
                <h3>预处理工具</h3>
                <p>虽然可以直接使用 Bootstrap 提供的 CSS 样式表，但是不要忘记，Bootstrap 的源码是采用最流行的 CSS 预处理工具 Less 和 Sass 开发的。你可以直接采用预编译的 CSS
                  文件快速开发，也可以从 Bootstrap 源码自定义自己需要的样式。</p>
              </div>
              <div class="col-sm-4">
                <img class="img-responsive"
                  src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/img/devices.png" alt="">
                <h3>一个框架、多种设备。</h3>
                <p>你的网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。</p>

              </div>
              <div class="col-sm-4">
                <img class="img-responsive"
                  src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/img/components.png" alt="">
                <h3>功能完备</h3>
                <p>Bootstrap 提供了全面、美观的文档，你能在这里找到关于普通 HTML 元素、HTML 和 CSS 组件以及 jQuery 插件方面的所有详细文档。</p>
              </div>



            </div>

          </div>
          <div class="col-md-1"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- bbs -->
  <section id="bbs">
    <div class="container">
      <div class="row wow flipInY">
        <div class="col-md-4">
          <a href="http://www.baidu.com" target="_blank">
            <img class="img-responsive" src="img/az.jpg" alt="">
            <h3>Android安卓</h3>
            <p>Android开发技术交流,问题求助，实战案例分享</p>
          </a>
        </div>
        <div class="col-md-4">
          <a href="http://www.baidu.com" target="_blank">
            <img class="img-responsive" src="img/ios.jpg" alt="">
            <h3>ios开发</h3>
            <p>Android开发技术交流,问题求助，实战案例分享</p>
          </a>
        </div>
        <div class="col-md-4">
          <a href="http://www.baidu.com" target="_blank">
            <img class="img-responsive" src="img/qrs.jpg" alt="">
            <h3>嵌入式开发</h3>
            <p>Android开发技术交流,问题求助，实战案例分享</p>
          </a>
        </div>
      </div>
    </div>
  </section>
  <!-- html5 -->
  <section id="html5">
    <div class="container">

      <div class="col-md-6 wow fadeInLeft">
        <h2>HTML5前端开发</h2>
        <p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准</p>
        <p><span class="mal-icon glyphicon glyphicon-grain"></span>它是一个新版本的HTML语言，具有新的元素，属性和行为，</p>
        <p><span class="mal-icon glyphicon glyphicon-grain"></span>HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。</p>
      </div>
      <div class="col-md-6 wow fadeInRight">
        <img class="img-responsive"
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3592162626,3771135061&fm=11&gp=0.jpg" alt="">
      </div>

    </div>
  </section>
  <!-- bootstrap -->
  <section id="bootstrap">
    <div class="container wow bounceInUp">

      <div class="col-md-6 ">
        <img class="img-responsive"
          src=""
          alt="">

      </div>
      <div class="col-md-6">
        <h2>bootstrap前端开发</h2>
        <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
        <p><span class="mal-icon glyphicon glyphicon-grain"></span>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
        <p><span class="mal-icon glyphicon glyphicon-grain"></span>我们在“优站精选”里展示了许多精美的 Bootstrap 网站。</p>
      </div>

    </div>
  </section>
  <!-- 联系我们 -->
  <section id="footer">
    <div class="container">
      <div class="row wow rotateInDownLeft">
        <div class="col-md-6">
          <h2>联系我们</h2>
          <p>
            <span class=" glyphicon glyphicon-send"></span>
            &nbsp;
            广东省，以岭南东道、广南东路得名，简称“粤”，省会广州，是中国大陆南端沿海的一个省份，位于南岭以南，南海之滨，与香港、澳门、广西、湖南、江西和福建接壤，与海南隔海相望，划分为珠三角、粤东、粤西和粤北四个区域，下辖21个地级市（其中副省级城市2个），119个县级行政区（60个市辖区、20个县级市、36个县、3个自治县）。
          </p>
          <address>

            <p>
              <span clas=" glyphicon glyphicon-home"></span>
              &nbsp;
              广东省在语言风俗、传统、历史文化等方面都有着独特风格，是岭南文化的重要传承地。
            </p>

            <p>
              <span class="glyphicon glyphicon-phone-alt"></span>
              &nbsp;
              电话：11111111111111111
            </p>
            <p>
              <span class="glyphicon glyphicon-envelope"></span>
              &nbsp;
              邮箱：32472643r797392
            </p>
          </address>
        </div>
        <div class="col-md-6">
          <form action="#" method="POST" class="foo-t25">
            <div class="col-md-6">
              <input type="text" class="form-control" placeholder="你的姓名">
            </div>
            <div class="col-md-6">
              <input type="email" class="form-control" placeholder="你的邮箱">
            </div>
            <div class="col-md-12">
              <input type="email" class="form-control" placeholder="标题">
            </div>
            <div class="col-md-12">
              <textarea class="form-control" placeholder="留言内容" rows="4"></textarea>
            </div>
            <div class="col-md-8">
              <input type="submit" class="form-control" value="提交">
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>


  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/singlepagenav.jquery.js"></script>
  <script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>
  <script>
    $(function () {
      /*导航跳转效果插件*/
      $('.nav').singlePageNav({
        offset: 70
      });
      /*小屏幕导航点击关闭菜单*/
      $('.navbar-collapse a').click(function () {
        $('.navbar-collapse').collapse('hide');
      });
      new WOW().init();



    })
  </script>
</body>

</html>